<!--申请-->
<template>
  <section class="section server-sec">
    <div class="sv-detail">
      <div class="container">
        <div class="detail-sec">
          <div class="location mb20">您当前的位置：<router-link :to="{'name':'Fwdt'}">自定义表单测试</router-link> > <span class="font-red">{{forName}}</span></div>

          <form-components v-show="status==='apply'"
            :formDatas="formDatas"
            :cancelBtnShow=false
            submitText="提交申请"
            :onSuccess="handleSuccess"
            :onError="handleError">
          </form-components>

          <!--提交成功-->
          <div class="result" v-if="status==='success'">
            <div class="top">
              <p class="pic"><img src="@/assets/images/sucess.png" alt=""></p>
              <h3>{{res.msg}}</h3>
              <p>您的{{formDatas.formName}}已经提交成功，如您需要查看审核情况，请通过{{formDatas.formName}}结果页面查看或者点击下方的查看结果查看</p>
            </div>
            <div class="bunt">
              <router-link class="btn-theme-o" :to="{'name':'student'}">返回首页</router-link>
              <router-link class="btn-theme" :to="{name:'ApplyDetail',params: { type:'result',instanceId: res.data}}">查看结果</router-link>
            </div>
          </div>

          <!--提交失败-->
          <div class="result" v-else-if="status==='error'">
            <div class="top">
              <p class="pic"><img src="@/assets/images/failure.png" alt=""></p>
              <h3>{{res.msg}}</h3>
              <p>请核对并修改以下信息后，再重新提交。</p>
            </div>
            <div class="prog">
              <h3>您提交的内容有如下错误：</h3>
              <div class="info">
                <!--<p><img src="assets/images/error.png" alt="">你的账户还不具备申请资格<span><a href="">立即前往</a></span></p>
                <p><img src="assets/images/error.png" alt="">你的账户还不具备申请资格<span><a href="">立即前往</a></span></p>-->
                {{res.data}}
              </div>
            </div>
            <div class="bunt">
              <button class="return" @click="status='apply'">返回修改</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import FormComponents from "@/components/form/Form";
export default {
  name: "Apply",
  components: { FormComponents },
  data() {
    return {
      formCode: this.$route.params.formCode,
      sceneCode: this.$route.query.cj || "default", //场景代码
      forName: "",
      formDatas: [],
      editFlag: true,
      status: "apply", //apply,success,error
      instanceId: "",
      res: {}
    };
  },
  created: function() {
    this.getData();
  },
  methods: {
    getData() {
      this.$http
        .get(
          "/zftal-xgxt-web/dynamic/form/find/" +
            this.formCode +
            "/" +
            this.sceneCode +
            ".zf",
          {
            params: {
              dataId: "xsxx"
            }
          }
        )
        .then(res => {
          if (res.code === 0) {
            this.formDatas = res.data;
            document.title = this.forName = res.data.formName;
          }
        });
    },
    //提交成功处理
    handleSuccess(res) {
      this.status = "success";
      this.res = res;
    },
    //提交失败处理
    handleError(res) {
      this.status = "error";
      this.res = res;
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .form-ft {
  text-align: center;
  margin-bottom: 20px;
  .btn-theme {
    padding: 7px 60px;
    background-color: #4a89dc;
    &:hover {
      border-color: #4177bf;
    }
  }
}
</style>
